<template>
  <div id="user">
    <el-container>

      <div width='20%'>

        <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
          <router-link to="/home">
            <el-menu-item index="1">
              <i class="el-icon-menu"></i>
              <span slot="title">首页</span>
            </el-menu-item>
          </router-link>
          <router-link to="/Device">
            <el-menu-item index="2">
              <i class="el-icon-setting"></i>
              <span slot="title">设备管理</span>
            </el-menu-item>
          </router-link>
          <router-link to="/Order">
          <el-menu-item index="3">

            <i class="el-icon-document"></i>
            <span slot="title">订单管理</span>
          </el-menu-item>
          </router-link>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-tickets"></i>
              <span slot="title">报表管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="4-1">合作方信息</el-menu-item>
              <el-menu-item index="4-2">合作方订单</el-menu-item>

            </el-menu-item-group>

          </el-submenu>
          <router-link to="/Vip">
          <el-menu-item index="5">
            <i class="el-icon-star-off"></i>
            <span slot="title">会员管理</span>
          </el-menu-item>
          </router-link>
          <router-link to="/UserM">
          <el-menu-item index="6">
            <i class="el-icon-service"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
          </router-link>
        </el-menu>
      </div>
      <el-container>
        <el-header>
          <!-- 伸展图标 -->
          <div class="aside_icon" @click="showToggle()">
            <i class="el-icon-back"></i>
          </div>
          <!-- 用户 -->
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              Mr.fan
              <i class="el-icon-caret-bottom el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item class="clearfix">
                修改密码

              </el-dropdown-item>
              <router-link to="/login">
              <el-dropdown-item class="clearfix">
                退出登录

              </el-dropdown-item>
              </router-link>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>
        <el-main>

          <router-view></router-view>
        </el-main>

      </el-container>
    </el-container>

  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: false
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    showToggle() {
      if (this.isCollapse == false) {
        this.isCollapse = true;
      } else {
        this.isCollapse = false;
      }
    }
  }
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100%;
}
a{
  text-decoration:none;
}
#user{
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  width: 100%;
  height: 100%;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-container {
  width: 100%;
  height: 100%;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
  padding: 0;
  padding-right: 20px;
}
.el-dropdown {
  float: right;
  cursor: pointer;
}
.aside_icon {
  float: left;
  padding: 0 20px;
  cursor: pointer;
}

.el-aside {
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
}

body > .el-container {
  margin-bottom: 40px;
}
</style>
